<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '活动详情',
  },
}
</route>
<template>
  <div class="activity-detail" v-if="activity.id">
    <div class="banner">
      <swiper
        v-if="imgUrls.length > 0"
        class="swiper"
        circular
        :current="current"
        @change="currentChange"
      >
        <swiper-item v-for="(item, index) in imgUrls" :key="index">
          <image class="img" :src="item" @click="previewImage(0, [item])" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <div class="indicator" v-if="imgUrls.length > 1">
        <div
          v-for="(item, index) in imgUrls"
          :key="index"
          :class="{ active: current === index, dot: true }"
        ></div>
      </div>
    </div>

    <div class="content">
      <div class="card">
        <div class="name">
          <span>{{ activity.title }}</span>
          <div class="tag" :class="{ not: activity.statusMode.status !== 1 }">
            {{ activity.statusMode.text }}
          </div>
        </div>
        <div class="tip">
          <span class="icon i-carbon-layers"></span>
          <span class="text" v-if="activity.type === '1'">艺术展</span>
          <span class="text" v-if="activity.type === '2'">民谣</span>
        </div>
        <div class="tip">
          <span class="icon i-carbon-location-filled"></span>
          <span class="text">{{ activity.addr }}</span>
        </div>
        <div class="tip">
          <span class="icon i-carbon-time-filled"></span>
          <span class="text">{{ activity.day }}</span>
        </div>
      </div>

      <div class="introduce">
        <div class="title">活动介绍</div>
        <div class="info-text">{{ activity.blurb }}</div>
      </div>
    </div>

    <div class="bottom-bar">
      <div class="left">{{ activity.attendNum }}人已参与</div>
      <div class="btn disabled" v-if="activity.attend.id">已报名</div>
      <div class="btn active" @click="show = true" v-else-if="activity.statusMode.status === 1">
        立即报名
      </div>
    </div>

    <wd-popup v-model="show" custom-style="background: transparent;">
      <div class="form-popup">
        <div class="form-title">填写报名信息</div>
        <wd-form custom-class="custom-form" ref="form" :model="model">
          <wd-cell title="姓名">
            <wd-input
              prop="name"
              clearable
              v-model="model.name"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请输入姓名' }]"
            />
          </wd-cell>

          <wd-cell title="联系电话">
            <wd-input
              prop="phone"
              clearable
              v-model="model.phone"
              placeholder="请输入联系电话"
              :rules="[
                { required: true, message: '请输入联系电话' },
                { pattern: /\d{11}/, message: '请输入正确的联系电话' },
              ]"
            />
          </wd-cell>
        </wd-form>

        <button class="submit active" @click="handleSubmit()">保存</button>
      </div>
    </wd-popup>
  </div>
  <Seat v-else :loading="loading" />
</template>
<script lang="ts" setup>
import { msgSuccess, previewImage } from '@/utils/index'
import { activityStatus } from '@/pages-sub/g-components/Active/utils'
import dayjs from 'dayjs'

const show = ref(false)

const loading = ref(false)
const activity = ref<any>({})
const imgUrls = ref([])

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})

function getData() {
  loading.value = true
  http
    .get('/activity-app/open/detail', {
      id,
    })
    .then((res: any) => {
      activity.value = res
      imgUrls.value = res.imgUrls.split(',')
      activity.value.day = `${dayjs(res.startTime).format('YYYY年MM月DD HH:MM')} - ${dayjs(res.endTime).format('MM月DD HH:MM')}`
      activity.value.statusMode = activityStatus(res)
    })
    .finally(() => {
      loading.value = false
    })
}

const current = ref(0)
function currentChange({ detail }) {
  current.value = detail.current
}

const model = reactive({
  name: '',
  phone: '',
  activityId: '',
})
const form = ref()
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid }) => {
      if (valid) {
        uni.showLoading()
        model.activityId = activity.value.id
        http
          .post('/activity-attend-app/signUp', model)
          .then(() => {
            msgSuccess('操作成功')
            show.value = false
            getData()
          })
          .finally(() => {
            uni.hideLoading()
          })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>
<style lang="scss" scoped>
.activity-detail {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f1f1f1;

  .banner {
    position: relative;
    width: 100vw;
    height: 422rpx;
    .swiper {
      width: 100%;
      height: 100%;
      .img {
        width: 100vw;
        height: 422rpx;
      }
    }
    .indicator {
      position: absolute;
      bottom: 50rpx;
      left: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      width: 100%;
      .dot {
        width: 16rpx;
        height: 16rpx;
        margin: 0 3rpx;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8rpx;
        transition: all 0.3s;
        &.active {
          width: 32rpx;
          background-color: #fff;
        }
      }
    }
  }

  .content {
    position: relative;
    z-index: 2;
    padding: 0rpx 30rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 158rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 158rpx) !important;
    margin-top: -30rpx;

    .card {
      padding: 30rpx;
      background-color: #fff;
      border-radius: 30rpx;
      .name {
        display: flex;
        margin-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: 700;
        line-height: 38rpx;
        color: var(--color1);
        background-color: #fff;
        span {
          flex: 1;
          width: 0;
        }
        .tag {
          height: 42rpx;
          padding: 0 20rpx;
          font-size: 20rpx;
          font-weight: 500;
          line-height: 42rpx;
          color: #fff;
          background: var(--sc4);
          border-radius: 10rpx;
          &.not {
            background-color: rgba(#979797, 0.8);
          }
        }
      }
      .tip {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        font-size: 23rpx;
        line-height: 30rpx;
        color: var(--color4);
        .icon {
          margin-right: 8rpx;
        }
        .text {
          flex: 1;
          width: 0;
        }
      }
    }

    .introduce {
      padding: 38rpx 30rpx;
      margin-top: 28rpx;
      background-color: #fff;
      border-radius: 30rpx;
      .title {
        font-size: 30rpx;
        font-weight: 700;
        line-height: 38rpx;
        color: var(--color1);
      }
      .info-text {
        margin-top: 40rpx;
        font-size: 23rpx;
        line-height: 38rpx;
        color: var(--color1);
      }
    }
  }

  .bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 128rpx;
    padding: 0px 30rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom)) !important;
    background: #ffffff;
    box-shadow: 0px -7rpx 23rpx rgba(#a6a6a6, 0.1);

    .left {
      font-size: 27rpx;
      color: var(--color2);
    }
    .btn {
      width: 200rpx;
      height: 70rpx;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 66rpx;
      color: #fff;
      text-align: center;
      background: var(--sc1);
      border-radius: 35rpx;
      box-shadow: 0px 17rpx 29rpx rgba(#1f2026, 0.3);
      &.disabled {
        background-color: var(--color5);
        box-shadow: none;
      }
    }
  }

  .form-popup {
    box-sizing: border-box;
    width: 654rpx;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .form-title {
      margin-bottom: 40rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: var(--color1);
      text-align: center;
    }
    .submit {
      box-sizing: border-box;
      width: 100%;
      height: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color1);
      border-radius: 46rpx;
      box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    }
  }
}
</style>
